<template>
  <view class="my-container">
    <view class="page">
      <view class="area">
        <view class="cell-column">
          <view class="cell-text">
            昵称
          </view>
          <view class="cell-option">
            <input class="input" v-model="user.nickName" maxlength="10" placeholder="请输入" />
          </view>
        </view>
        <view class="cell-column">
          <view class="cell-text">
            手机号
          </view>
          <view class="cell-option">
            <input class="input" v-model="user.phonenumber" maxlength="11" placeholder="请输入" />
          </view>
        </view>
        <view class="cell-column">
          <view class="cell-text">
            真实姓名
          </view>
          <view class="cell-option flexRow">
            <input class="input" v-model="user.realName" maxlength="10" placeholder="请输入" />
            <radio-group class="radioG" @change="sexChange">
            	<label class="radioL" v-for="(item,index) in radioItems" :key="index">
            		<view>
            			<radio color="#3FAA73" :id="item.name" :value="item.name" :checked="user.sex === item.name"></radio>
            		</view>
            		<view>
            			<label class="radioL-text" :for="item.name">
            				<text>{{item.value}}</text>
            			</label>
            		</view>
            	</label>
            </radio-group>
          </view>
        </view>
        <view class="cell-column">
          <view class="cell-text">
            身份证号
          </view>
          <view class="cell-option">
            <input class="input" v-model="user.userIdcode" maxlength="18" placeholder="请输入" />
          </view>
        </view>
      </view>
      <view class="area">
        <view class="cell-column">
          <view class="cell-text">
            住址
          </view>
          <view class="cell-option">
            <input class="input" v-model="user.address" maxlength="50" placeholder="请输入" />
          </view>
        </view>
        <view class="cell-column">
          <view class="cell-text">
            邮箱
          </view>
          <view class="cell-option">
            <input class="input" v-model="user.email" maxlength="30" placeholder="请输入" />
          </view>
        </view>
      </view>
      <view class="area">
        <view class="cell-column">
          <view class="cell-text">
            紧急联系人
          </view>
          <view class="cell-option">
            <input class="input" v-model="user.sosContact" maxlength="20" placeholder="请输入" />
          </view>
        </view>
        <view class="cell-column">
          <view class="cell-text">
            紧急联系电话
          </view>
          <view class="cell-option">
            <input class="input" v-model="user.sosContactPhone" maxlength="11" placeholder="请输入" />
          </view>
        </view>
      </view>
    </view>
    <view class="my-footer" :style="{bottom: GET_SAFEAREA_BOTTOM+'px'}">
      <view class="text" @click="submitFun">保存</view>
      <view class="bottom">
        <radio class="radio" color="#3FAA73" :checked="radioChecked"  @click="radioChange"/>
        勾选即代表同意<text @click="showDocFun">隐私政策</text>
      </view>
    </view>
    <uni-popup
      ref="popup"
      type="bottom"
      :backgroundColor="'#ffffff'"
      :transStyle="{
        borderTopLeftRadius: '40rpx',
        borderTopRightRadius: '40rpx',
        overflow: 'hidden',
      }"
    >
      <view class="popup-content">
        <image
          class="popup-close"
          :src="`${img_baseUrl}/statics/std/static/delete2.png`"
          @click="closePopup"
        ></image>
        <view class="title">隐私政策</view>
        <scroll-view class="text" :scroll-y="true">
          <rich-text :nodes="doc"></rich-text>
        </scroll-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import {mapGetters} from 'vuex'
  import store, { GET_SAFEAREA_BOTTOM } from '../../store/index.js';
  import requestPost, { login } from '@/utils/request.js';
  import validateMobile, {isCardID} from '@/utils/verification.js';
  export default{
    data() {
      return {
		  img_baseUrl: process.env.VUE_APP_BASEURL_IMG_API,
        user: {
          nickName: '',
          phonenumber: '',
          realName: '',
          userIdcode: '',
          address: '',
          email: '',
          sex: '0',
          sosContact: '',
          sosContactPhone: ''
        },
        showDoc: false,
        radioChecked: false,
        doc: '',
        radioItems: [{
            name: '0',
            value: '男'
          },
          {
            name: '1',
            value: '女'
          }
        ],
      }
    },
    computed: {
    	...mapGetters([GET_SAFEAREA_BOTTOM])
    },
    onShow(){
      this.user = Object.prototype.toString.call(uni.getStorageSync('X-UserInfo')) === "[object Object]" ? uni.getStorageSync('X-UserInfo') : null;
    },
    mounted() {
      console.log('安全区距离', this.GET_SAFEAREA_BOTTOM);
    },
    methods: {
      submitFun(){
        if(!this.radioChecked){
          uni.showToast({title: '请先同意用户隐私政策！', icon: 'none'});
          return
        }
        if(this.user.phonenumber && this.user.phonenumber != '' && !validateMobile(this.user.phonenumber)){
          uni.showToast({title: '请输入正确的手机号码！', icon: 'none'});
          return
        }
        if(this.user.userIdcode && this.user.userIdcode != '' && isCardID(this.user.userIdcode) != ''){
          uni.showToast({title: '身份证号码校验未通过！', icon: 'none'});
          return
        }
        uni.showLoading({title: '数据提交中'});
        requestPost('/wxUser/edit', {...this.user, roles: null}, '/baseplatform').then(res => {
          uni.hideLoading();
          if(res.code === 200){
            uni.showToast({title: '保存成功！'});
            login(false);
          }else{
            uni.showToast({title: res.msg || '修改失败！', icon: 'none'});
          }
        })
      },
      sexChange(e){
         this.user.sex = e.target.value;
      },
      radioChange(){
        this.radioChecked = !this.radioChecked;
      },
      closePopup() {
        this.$refs.popup.close();
      },
      showDocFun(type){
        this.doc = `<p>  本软件尊重并保护所有使用服务用户的个人隐私权。为了给您提供更准确、更有个性化的服务，本软件会按照本隐私权政策的规定使用和披露您的个人信息。但本软件将以高度的勤勉、审慎义务对待这些信息。</p><p>    除本隐私权政策另有规定外，在未征得您事先许可的情况下，本软件不会将这些信息对外披露或向第三方提供。本软件会不时更新本隐私权政策。</p><p>    您在同意本软件服务使用协议之时，即视为您已经同意本隐私权政策全部内容。本隐私权政策属于本软件服务使用协议不可分割的一部分。</p><p><strong>   1. 我们如何搜集您的信息?</strong></p><p>   我们提供服务时，可能会收集、储存和使用下列信息:</p><p>   1.1您提供的信息</p><p>   (1)您在注册账户或使用我们的服务时，向我们提供的相关个人信息，例如您的电子电话号码等信息。如果您想充分使用我们提供的各种分享功能，可能还需要创建公开显示的个人资料，其中可能会包含您的姓名和照片。</p><p>   (2)您通过我们的服务向其他方提供的共享信息，以及您使用我们的服务时上传、提交、存储、发送或接收的信息。</p><p>   1.2您在使用服务过程中，我们获取的信息</p><p>   我们会收集您使用的服务以及使用方式的信息，此类信息包括:</p><p>   (1)设备信息:我们会收集设备专用的信息，例如您的硬件型号、操作系统信息、移动设备版本、设备识别码、屏幕分辨率等信息。                         </p><p>   (2)日志信息</p><p>   A设备或软件信息，例如您的移动设备、网页浏览器或用于接入我们服务的其他程序所提供的配置信息、您的IP地址和移动设备所用的版本和设备识别码;</p><p>   B.在使用我们服务时搜索或浏览的信息，例如您使用的网页搜索词语、访问的社交媒体页面URL地址，以及您在使用我们服务时浏览或要求提供的其他信息和内容详情;</p><p>   (3)IP地址</p><p>   A.有关您曾使用的移动应用(APP)和其他软件的信息，以及您曾经使用该等移动应用和软件的信息;</p><p>   B.您通过我们的服务分享的内容所包含的信息(元数据)，例如拍摄或上传的共享照片或录像的日期、时间或地点等。</p><p><strong>   2.我们如何使用您的信息</strong></p><p>   我们可能将上述收集的信息用作以下用途:</p><p>   (1)向您提供服务;</p><p>   (2)在我们提供服务时，用于身份验证、客户服务、安全防范、存档和备份用途，确保我们向您提供的产品和服务的安全性;</p><p>   (3)帮助我们设计新服务，改善我们现有服务;</p><p>   (4)使我们更加了解您如何接入和使用我们的服务，从而针对性地回应您的个性化需求，例如语言设定、位置设定、个性化的帮助服务和指示，或对您和其他用户作出其他方面的回应;</p><p>   (5)向您提供与您更加相关的广告以替代普遍投放的广告;</p><p>   (6)执行软件验证、升级服务;</p><p>   (7)应用户特殊要求而提供特定服务时，需要将信息提供给我们的关联公司、第三方或其他用户;</p><p>   (8)其他有利于用户和App运营者利益且不违反任何强制性法律法规的情况。</p><p>   (9)让您参与有关我们产品和服务的调查</p><p><strong>   3.我们承诺</strong></p><p>   (1)我们不会根据敏感类别(例如种族、宗教、性取向或健康状况)向您展示个性化广告;</p><p>   (2)我们不会与广告主分享可用于识别您个人身份的信息，例如您的姓名(除非经您授权同意);</p><p>   (3)在任何时候、任何情况下都不会向任何第三方出售您的个人信息，我们只会在法律允许的范围内使用根据本协议获得的信息。我们会制定严格的政策保护您的个人信息，除非事先获得您的授权或本声明另有规定之外，不会将您的这些信息对外公开或向第三方提供。</p><p><strong>   4.我们不会将您的个人信息转移或披露给任何非关联的第三方，除非:</strong></p><p>   (1)相关法律法规、法律程序、政府机关的强制性要求;</p><p>   (2)为完成合并、分立、收购或资产转让而转移</p><p>   (3)事先获得您的授权;(4)您使用共享功能;</p><p>   (5)以学术研究或公共利益为目的;</p><p>   (6)在法律法规和政策允许的范围内，为提升用户体验和提供个性化的推广服务;</p><p><strong>   `
        this.$refs.popup.open();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .my-container {
    position: relative;
    height: 100vh;
    padding: 0 32rpx 32rpx 32rpx;
    background: #F5F7F6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  .page{
    width: 100%;
    height: calc(100vh - 310rpx);
    overflow: auto;
    margin-bottom: 40rpx;
  }
  .area{
    width: 100%;
    background-color: #FFFFFF;
    margin-top: 16rpx;
    border-radius: 24rpx;
  }
  .cell-column{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    height: 104rpx;
    padding: 0 24rpx;
    .cell-text{
      width: 184rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.5);
      line-height: 104rpx;
    }
    .cell-option{
      position: relative;
      width: 100%;
      height: 100%;
      flex: 1;
      .input{
        height: 104rpx;
        line-height: 104rpx;
        font-size: 28rpx;
        padding-left: 32rpx;
        background: #FFFFFF;
        border-radius: 8rpx;
      }
      .radioG{
        width: 334rpx;
        flex: 0 1 auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        .radioL{
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          flex: 50%;
          .radioL-text{
            font-size: 32rpx;
            font-weight: 400;
            color: rgba(0,0,0,0.8);
            line-height: 44rpx;
          }
        }
      }
    }
    .flexRow{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }
  .my-footer {
    position: fixed;
    bottom: 34rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #F5F7F6;
    .text {
      width: 598rpx;
      height: 84rpx;
      background: #3FAA73;
      border-radius: 44rpx 44rpx 44rpx 44rpx;
      font-size: 32rpx;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 84rpx;
      text-align: center;
    }
    .bottom{
      margin: 48rpx 0 12rpx 0;
      font-size: 24rpx;
      font-weight: 400;
      color: rgba(0,0,0,0.8);
      text{
        color: #3FAA73;
        margin: 0 8rpx;
      }
      .radio{
        margin-right: 8rpx;
      }
    }
  }
  .popup-content {
    max-height: 80vh;
    position: relative;
  
    .popup-close {
      width: 48rpx;
      height: 48rpx;
      position: absolute;
      right: 24rpx;
      top: 24rpx;
      z-index: 1;
    }
    .title{
      width: 100%;
      height: 108rpx;
      font-size: 42rpx;
      font-weight: 500;
      color: rgba(0,0,0,0.9);
      line-height: 108rpx;
      text-align: center;
      border-bottom: 2rpx solid rgba(0,0,0,0.1);
    }
    .text{
      width: auto;
      height: calc(900rpx - 108rpx);
      overflow: auto;
      font-size: 32rpx;
      margin: 24rpx;
      text-indent: 28rpx;
      line-height: 64rpx;
    }
    rich-text{
      height: inherit;
      overflow: auto;
    }
  }
</style>